<template>
	<view class="content">
		<view>
			<view v-if="aboutUs.pic_url" class="text-center padding">
				<view class="cu-avatar xxl round " :style="'background-image:url('+aboutUs.pic_url[0]+ '?imageView2/2/w/300); width: 75px;height: 75px;'"></view>
			</view>
			<view class="cu-form-group">
				<view class="title">预约服务</view>
				<picker @change="pickerCatChange" :value="catIndex" :range="catNames">
					<view class="picker">{{ catIndex > -1 ? catNames[catIndex] : '选择你的预约项目' }}</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">预约时间</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker uni-input">{{date}}</view>
				</picker>
			</view>

			<view class="padding">预留信息</view>
			<view class="cu-form-group">
				<view class="title">联系人</view>
				<input placeholder="请输入联系人" name="input" @input="textareaAInput" data-name="extraData" data-sub="name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系电话</view>
				<input placeholder="请输入联系电话" name="input" type="number" @input="textareaAInput" data-name="extraData" data-sub="phone"></input>
			</view>


			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
			<view class="cu-form-group margin-top">
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" data-name="content" placeholder="请在此处描述预约备注,如:时间,地点,要求信息"></textarea>
			</view>

			<view class="box margin-top-20 text-center" style=" padding: 20upx;">

				<button @click="postForm" class="cu-btn bg-red block lg margin-tb-sm ">
					<text :class="loadding==1?'cuIcon-loading2 cuIconfont-spin':'cuIconfont-spin'"></text> 立即预约</button>

			</view>

		</view>
		<view class="cu-list grid col-2">
			<view class="cu-item" @click="callPhone">
				<text class="lg text-gray cuIcon-phone" ></text>
				<text>电话</text>
			</view>
			<button class="cu-item button">
				<text class="lg text-gray cuIcon-service action" open-type="contact" ></text>
				<text>在线咨询</text>
			</button>
		</view>
	</view>
</template>
<style lang="scss">
	.cu-list{
		.button{ 
			background: inherit;
			border: none;
		}
		.button:after{
			border: none;
		}
	}
</style>
<script>
	import beeApp from '../../beeApp.js'

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				modalName: null,
				imgList: [],
				catNames: [],
				aboutUs:{},
				catIndex: -1,
				loadding: 0,
				pics: [],
				content: '',
				data: {
					extraData:{}
				},
				date: currentDate,
			}
		},
		onLoad() {
			this.loadCateList();
			this.getAboutUs();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.aboutUs.extend.phone
				})
			},
			getAboutUs() {
				var that = this;
			
				beeApp.api(
					'sns/material/get', {
						type: 'aboutUs',
						limit: 1
					},
					function(res) {
						if (res.code != 200) {
							beeApp.alert(res.msg);
							return;
						}
						var list = res.data.list;
						if (list.length > 0) {
							that.aboutUs = list[0];
						}
					}
				);
			},
			
			pickerCatChange(e) {
				console.log(e);
				this.catIndex = e.detail.value;
				// this.data.extraData.review_time = e.detail.value;
			},
			loadCateList() {
				var that = this;
				beeApp.api(
					'sns/material-list/get', {
						material_type: 'service',
						limit: 100
					},
					res => {
						var catNames = [];
						var serviceList = res.data.list;
						for (var i in serviceList) {
							if (serviceList[i].content_data) {
								catNames.push(serviceList[i].content_data.name + '(¥' + serviceList[i].content_data.price + ')')
							}
						}
						this.catNames = catNames;
						this.cateArray = res.data;
					}
				);
			},
			textareaAInput(e) {
				var name = e.currentTarget.dataset.name;
				if (name == 'extraData') {
					var sub = e.currentTarget.dataset.sub;
					this.data.extraData[sub] = e.detail.value;
					return;
				}

				this.data[name] = e.detail.value;
			},
			postForm: function() {
				var that = this;
				if (that.loadding == 1) {
					return;
				}

				// if(!this.data.content){
				//  beeApp.alert("请描述您的合作意向");
				//  return;
				// }
				var service_name = this.catNames[this.catIndex];
				if (!service_name) {
					beeApp.alert("请选择预约服务");
					return;
				}
				if (this.data.extraData['phone'] == "") {
					beeApp.alert("请填写预留手机号");
					return;
				}
				if (this.data.extraData['name'] == "") {
					beeApp.alert("请填写联系人");
					return;
				}
				that.loadding = 1;
				this.data.extraData['date'] = this.date;
				this.data.extraData['service_name'] = service_name;
				beeApp.api("sns/topic/add", {
					pid: 94,
					content:this.data.content,
					extraData: JSON.stringify(this.data.extraData),
					
					method: "POST",
				}, function(res) {
					that.loadding = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}

					beeApp.alert("提交成功，我们会尽快联系您", function() {
						//beeApp.setPageData("pages/user/topics",{reload:1});
						uni.navigateBack();

					})
				});
			},
		}

	}
</script>
